<script setup lang="ts">
import { computed, defineAsyncComponent, inject, onMounted, provide, reactive, Ref, ref, watch, nextTick } from 'vue';
import { utils, appContext } from '@xcan-angus/infra';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ProjectInfo } from '@/layout/types';
import { ApiMenuKey, createMenuItems } from '@/views/apis/menu';

const LeftMenu = defineAsyncComponent(() => import('@/components/layout/leftMenu/index.vue'));
const Homepage = defineAsyncComponent(() => import('@/views/apis/home/index.vue'));
const Services = defineAsyncComponent(() => import('@/views/apis/services/index.vue'));
const Share = defineAsyncComponent(() => import('@/views/apis/share/index.vue'));
const Server = defineAsyncComponent(() => import('@/views/apis/server/index.vue'));
const Trash = defineAsyncComponent(() => import('@/views/apis/trash/index.vue'));
const Design = defineAsyncComponent(() => import('@/views/apis/design/index.vue'));
const Mock = defineAsyncComponent(() => import('@/views/apis/mock/index.vue'));

const router = useRouter();
const { t } = useI18n();

const menuItems = createMenuItems(t);
const activeKey = ref<ApiMenuKey>();

const servicesRef = ref();
const userInfo = ref(appContext.getUser());
const projectInfo = inject<Ref<ProjectInfo>>('projectInfo', ref({} as ProjectInfo));
const appInfo = ref(appContext.getAccessApp());
const projectId = computed(() => {
  return projectInfo.value?.id;
});

const updateProjectInfo = reactive({ id: '', name: '' });
const homepageRefreshNotify = ref<string>('');
const trashRefreshNotify = ref<string>('');
const servicesRefreshNotify = ref<string>('');

let homepageRefreshNotifyFlag = false;
let trashRefreshNotifyFlag = false;
let servicesRefreshNotifyFlag = false;

onMounted(() => {
  watch(() => activeKey.value, (newValue) => {
    if (newValue === ApiMenuKey.HOME) {
      if (homepageRefreshNotifyFlag) {
        homepageRefreshNotify.value = utils.uuid();
      }
      homepageRefreshNotifyFlag = true;
      return;
    }

    if (newValue === ApiMenuKey.TRASH) {
      if (trashRefreshNotifyFlag) {
        trashRefreshNotify.value = utils.uuid();
      }
      trashRefreshNotifyFlag = true;
      return;
    }

    if (newValue === ApiMenuKey.SERVICES) {
      if (servicesRefreshNotifyFlag) {
        servicesRefreshNotify.value = utils.uuid();
      }
      servicesRefreshNotifyFlag = true;
    }
  }, { immediate: true });
});

provide('updateProjectInfo', updateProjectInfo);
provide('addTabPane', (params) => {
  router.replace(`/apis#${ApiMenuKey.SERVICES}`);
  setTimeout(() => {
    servicesRef.value &&servicesRef.value.addTabPane(params);
  }, 100);
});
provide('deleteTabPane', (params) => servicesRef.value && servicesRef.value.deleteTabPane(params));
provide('updateTabPane', (params) => servicesRef.value && servicesRef.value.updateTabPane(params));
provide('replaceTabPane', (params) => servicesRef.value && servicesRef.value.replaceTabPane(params));
provide('updateApiGroup', (params) => servicesRef.value && servicesRef.value.updateApiGroup(params));
</script>
<template>
  <LeftMenu v-model:activeKey="activeKey" key="apis" :menuItems="menuItems">
    <template #home>
      <Homepage
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo"
        :refreshNotify="homepageRefreshNotify" />
    </template>
    <template #services>
      <Services
        ref="servicesRef"
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo"
        :refreshNotify="homepageRefreshNotify" />
    </template>
    <template #mock>
      <Mock
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo"
        :refreshNotify="homepageRefreshNotify" />
    </template>
    <template #share>
      <Share
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo" />
    </template>
    <template #server>
      <Server
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo" />
    </template>
    <template #trash>
      <Trash
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo"
        :refreshNotify="trashRefreshNotify" />
    </template>
    <template #design>
      <Design
        :projectId="projectId"
        :userInfo="userInfo"
        :appInfo="appInfo" />
    </template>
  </LeftMenu>
</template>
